<template>
  <div class="seach">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">搜索</span>
      <span class="header-wrap-right">
        <!-- <i class="iconseach iconfont icon-sousuo"></i> -->
      </span>
    </div>
    <!-- 搜索 -->
    <div class="seach-box">
      <van-search
        v-model="value"
        placeholder="请输入搜索内容"
        shape="round"
        @input = 'getSeach'
      >
      </van-search>
    </div>
    <!-- 列表 -->
    <div class="query-box">
      <div class="query-list" @click="toDetail(list.fromtype,list.id)" v-for='(list,index) in listData' :key="index">
          <div class="list-content list-img">
             <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594267483786&di=232665e4c3b5447fb1f7236d13ffc849&imgtype=0&src=http%3A%2F%2Fdingyue.nosdn.127.net%2F2FB2OH2lUQCgD7WPaYQnmb47qO6hVB672wEthgvSZFTWq1545293646375compressflag.jpg" alt="">
          </div>
          <div class="list-content">
            <div class="content-list" v-if="list.fromtype== 'Package'">
             <span style="margin: .35rem .35rem 0 0;" >快递包裹</span>
             <span>{{list.text}}</span>
            </div>
            <div class="content-list" v-if="list.fromtype== 'Guide'">
              <span style="margin: .35rem .35rem 0 0;" >办事指南</span>
              <span>{{list.text}}</span>
            </div>
            <div class="content-list" v-if="list.fromtype== 'Repair'">
              <span style="margin: .35rem .35rem 0 0;">物业报修</span>
              <span >{{list.text}}</span>
            </div>
            <div class="content-list" v-if="list.fromtype== 'Money'">
             <span style="margin: .35rem .35rem 0 0" >费用缴费</span>
             <span>{{list.text}}</span>
            </div>
             <span>时间:{{list.createtime | formatTime}}</span>
          </div>
      </div>
    </div>
    <Tips v-if="show"/>
  </div>
</template>
<script>
import api from '../../api/api.js'
import { Search } from 'vant';
import Tips from '../../components/tips'
export default {
  data(){
    return{
      show:false,
      value:'',
      length: '',
      listData:[]
    }
  },
  filters: {
    formatTime: function time(value) {
    var now = new Date(value * 1000);
    var y = now.getFullYear();
    var m = now.getMonth() + 1;
    var d = now.getDate();
      return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
    }
  },
  created(){

  },
  methods:{
    goback(){
      this.$router.go(-1)
    },
    // 综合搜索
    getSeach(){
      if(!this.value){
        this.listData = []
        this.show = true
        return
      }
      if(this.value){
        this.$get(api.seach, {
          params: {
            word: this.value
          } 
        })
        .then((response) => {
          if(response.data.code===1){
            this.listData = response.data.data.list
            this.length = response.data.data.list.length
            if(this.length!=0){
              this.show = false
            }else{
              this.show = true
              this.$toast.loading({
                message:'暂无搜索内容',
                duration: 350
              })
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
      }
    },
    // 去详情页
    toDetail(type,id){
      if(type=='Package'){
      this.$router.push({
        path: '/parcelDetail',
        query: {
          id
        }
      })
        return
      }
      if(type=='Guide'){
      this.$router.push({
        path: '/guideDetail',
        query: {
          id
        }
      })
        return
      }
      if(type=='Repair'){
      this.$router.push({
        path: '/repairDetail',
        query: {
          id
        }
      })
        return
      }
      if(type=='Money'){
      this.$router.push('/allPay',)
        return
      }
    }
  },
  components:{
    [Search.name]:Search,
    Tips
  }
}
</script>
<style>
.seach .van-field__body input{
  caret-color: #000; /* 光标颜色 */ 
}
/* .seach .van-search{
  background: none!important;
} */
.seach .van-search__action{
  color: #fff;
}
</style>

<style scoped>
.seach-box{
  position: fixed;
  top: 1rem;
  left: 0;
  width: 100%;
  height: 1rem;
  background: #f7f6fb;
  /* margin-top: 1.2rem; */
}
.query{
  background: #2e294e;
}
.query .header-wrap .iconback{
  margin-left: .3rem!important;
}
.query-box{
  height: auto;
  padding-top: 2.2rem;
}
.query-list{
  display: flex;
  background: #fff;
  height: 2.2rem;
  margin: .25rem .3rem;
  border-radius: .2rem;
}
.query-list .list-content{
  color: #000;
  flex: 1.2;
  font-weight: bold;
}
.query-list .list-content:nth-of-type(2){
  flex: 2;
}
.query-list .list-img img{
  border-radius: .2rem 0 0 .2rem;
  width: 100%;
  height: 100%;
}
.list-content span{
  line-height: .5rem;
  height: .5rem;
  text-indent: .3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.detail{
  text-align: right;
}
.detail span{
  display: inline;
  text-align: right;
  margin-right: .3rem;
  color: #ee5a8a;
}

</style>


